<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${title} + '!'"></title>
    <!-- zui -->
    <link href="/css/zui.min.css" rel="stylesheet">
    <!-- Bootstrap Material Design -->
    <link href="/css/ripples.min.css" rel="stylesheet">
    <!-- my css -->
    <link href="/css/style-mobile.css" rel="stylesheet">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.util.Ajax.httpRequest.js"></script>
    <!-- iconfont    -->
    <link href="http://at.alicdn.com/t/font_885931_wyz7jw3x2d.css" rel="stylesheet">
    <script src="http://at.alicdn.com/t/font_885931_8mwo8dkn2y9.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://www.ynjsedu.cn/static/js/moment.js"></script>
    <link rel="icon" type="image/png" href="https://tgzfile.oss-cn-beijing.aliyuncs.com/files//2022/12/23/16717798798412521.png">
</head>

<body class="zhibo-page mform-page"></body>
    <div class="zhibo-head-nav">
        <div class="text" style="display: inline-block;">祝福列表</div>
        <div class="text" style="display: inline-block; margin-left: 25%; font-size: 25px; color: red;">无需手动刷新页面，系统自动刷新获取弹幕内容</div>
        <div class="text" style="display: inline-block;float: right;"><button type="button" class="btn btn-primary" onclick="exportFunc(this)">导出excel</button></div>
    </div>
    <div class="container bg-panel mobile-pay">
        <div class="panel-body mobile-form form-head">
                <div class="list">
                        <header>
                          <h3> 记录 <small id="records"></small></h3>
                        </header>
                        <table class="table table-hover">
                            <thead>
                              <tr>
                                <th>#</th>
                                <th>祝福内容</th>
                                <th>发表时间</th>
                                <th>审核状态</th>
                                <th>操作</th>
                              </tr>
                            </thead>
                            <tbody id="list">

<!--                              <tr  th:each="info,infoStat : ${allBScreen}">-->
<!--&lt;!&ndash;                                  <td th:text="${infoStat.count}"></td>&ndash;&gt;-->
<!--                                  <td th:text="${info.msg}"></td>-->
<!--&lt;!&ndash;                                  <td th:text="${info.createTime}"></td>&ndash;&gt;-->
<!--                                  <td th:text="${#dates.format(info.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>-->
<!--                                  <td th:if="${info.status eq 0}"> <a href="##" data-toggle="modal" data-target="#tipModalCheckStatus" th:id="'cs_'+${info.id}"  onclick="checkStatusCurrent(this)">待审核</a></td>-->
<!--                                  <td th:if="${info.status eq 1}"> <a href="##" data-toggle="modal" th:id="'cs_'+${info.id}" >已过审</a></td>-->
<!--                                  <td> <a href="##" data-toggle="modal" data-target="#tipModal" th:id="${info.id}" onclick="checkCurrent(this)">删除</a></td>-->
<!--                              </tr>-->
                            </tbody>
                          </table>
                      </div>
        </div>
<!-- 控制选择样式 -->
<script>
    $('.mobile-pay a').on('click', function() {
        $(this).addClass('active2').siblings("a").removeClass('active2');
    })
</script>
    </div>
    </div>
</body>

<!-- 删除评论确认 -->
<div class="modal" id="tipModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
              <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
              确认删除?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>
                <button type="button" class="btn btn-primary" onclick="deleteFunc(this)">确定</button>
            </div>
    </div>
  </div>
</div>
<div class="modal" id="tipModalCheckStatus">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                确认通过?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">放弃</button>
                <button type="button" class="btn btn-primary" onclick="csFunc(this)">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 表单验证 -->
<link rel="stylesheet" href="/css/bootstrapValidator.css">
<script src="/js/bootstrapValidator.min.js"></script>

<!-- ZUI Javascript组件 -->
<script src="/js/zui.min.js"></script>
<!-- Bootstrap Material Design -->
<script src="/js/ripples.min.js"></script>
<script src="/js/material.js"></script>

<!--        th:inline="javascript"-->
<script th:inline="javascript">
    function checkCurrent(that){
        window.delete_id = $(that).attr('id')
    }
    function deleteFunc(that){
        console.log("got current click id is: ",window.delete_id)
        // $(that).attr("disabled","disabled")
        $.httpRequestAsyncPost("/bscreen/deleteById",
            {id:window.delete_id},
            function(result){
                if(result && result.data && result.data > 0){
                    //location.href = location.href
                    $('#tipModal').modal('toggle', 'center');
                    allListFunc()
                }
            },
            function(result){
                console.log(result);
            });
    }

    function checkStatusCurrent(that){
        window.cs_id = $(that).attr('id').split("cs_")[1]
    }
    function csFunc(that){
        console.log("got current click id is: ",window.cs_id)
        // $(that).attr("disabled","disabled")
        $.httpRequestAsyncPost("/bscreen/csById",
            {id:window.cs_id},
            function(result){
                if(result && result.data && result.data > 0){
                    //location.href = location.href
                    $('#tipModalCheckStatus').modal('toggle', 'center');
                    allListFunc()
                }
            },
            function(result){
                console.log(result);
            });
    }

    function exportFunc(that){
        window.open("/bscreen/downloadExcel");
    }

    /**
     * @Description:全部list
     * @author HeShengjin 2356899074@qq.com
     * @date 2022/12/30 10:00
     */
    allListFunc()
    function allListFunc(){
        $.httpRequestAsyncPost("/bscreen/allList",
            {},
            function(result){
                if(result && result.codeStatus == 1 ){
                    if(result.data && result.data.length > 0){
                        $("#list").empty();
                        $("#records").text("共 "+result.data.length+" 条");
                        for(var i = 0,ilen = result.data.length; i < ilen; i++){
                            var html = '<tr>'
                            html += '<td>'+(i+1)+'</td>'
                            html += '<td id="txt_'+( result.data[i].id )+'">'+( result.data[i].msg )+'</td>'
                            html += '<td>'+( moment(result.data[i].createTime).format("YYYY-MM-DD HH:mm:ss") )+'</td>'
                            if(result.data[i].status == 0){
                                html += '<td > <a href="##" data-toggle="modal" data-target="#tipModalCheckStatus" id="cs_'+( result.data[i].id )+'"  onclick="checkStatusCurrent(this)">待审核</a></td>'
                            }
                           else{
                                html += ' <td > <a href="##" data-toggle="modal" id="cs_'+( result.data[i].id )+'" >已过审</a></td>'
                            }
                            html += '<td> <a href="##" data-toggle="modal" data-target="#tipModal" id="'+( result.data[i].id )+'" onclick="checkCurrent(this)">删除</a></td>'
                            html += '</tr>'
                            $("#list").append(html);
                        }
                    }else{
                        $("#list").remove()
                    }
                }
            },
            function(result){
                console.log(result);
            });
    }

    var stompClient = null;
    //初始化websocket链接
    connect()
    function connect() {
        var socket = new SockJS(window.location.href.split("/b-screen-list.html")[0] + [[${endpoint}]]);
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function (frame) {
            console.log('Connected: ' + frame);
            stompClient.subscribe([[${topicChannel}]], function (response) {
                //response.body
                if(response.body){
                    var bscreenEntity = JSON.parse(response.body)
                    console.log(bscreenEntity)

                    var id =  bscreenEntity.idStr
                    var msg =  bscreenEntity.msg
                    var isDeleted =  bscreenEntity.isDeleted
                    var status =  bscreenEntity.status
                    //删除
                    if(isDeleted == 1){
                        console.log("删除id:",id)
                        //非弹幕页面，无需删除
                        //$("#"+id).remove();
                    }
                    //添加
                    else{
                        //新增弹幕
                        if(status == 0){
                            console.log("添加id:",id)
                            // var oDiv = document.createElement('div');//创建div
                            // oDiv.innerHTML = msg || ""//添加弹幕内容
                            // oDiv.id = id//添加id
                            // oDiv.className = 'magictime twisterInUp';//弹幕特效
                            // oShow.appendChild(oDiv);//添加一个子节点
                            // init(oDiv);//初始化
                            // lastWebSocketTimeSec = new Date().getTime()
                            //非弹幕页面
                            allListFunc()
                        }
                    }
                }
            });
        },{});
    }
    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        console.log("Disconnected");
    }
    window.onunload = function(){
        //页面卸载
        disconnect()
    }
</script>

</html>